iT邦幫忙

2023 iThome 鐵人賽

DAY 9
0

大家好~ 今天我們要來介紹jQuery~

jQuery是什麼?

jQuery 是 JavaScript 的函式庫,它簡化了許多在網頁開發中常見的事件,並提供了跨瀏覽器相容性,讓我們寫網頁變得更簡單快速。
以下為幾個常見的功能:

DOM 操作簡化

jQuery 讓DOM變得更好操作及監測。
例如 $(element) 和 .addClass()。

// 選取元素並添加類別
$("#myElement").addClass("highlight");

// 改變文字內容
$("#myElement").text("新的文字內容");

// 在元素中插入新的 HTML 內容
$("#myElement").html("<p>新的段落</p>");

// 獲取元素的屬性值
var href = $("#myLink").attr("href");

事件處理

jQuery 讓事件處理變得更簡單。
例如 $(element).click()。

// 加入 click 事件監聽器
$("#myButton").click(function() {
    alert("按鈕被點擊了!");
});

AJAX 支持

jQuery 在進行 AJAX 請求時,不需要重新載入整個頁面,可以從伺服器直接獲取資料。

// 發送 AJAX GET 請求
$.get("https://jsonplaceholder.typicode.com/posts", function(data) {
    console.log(data);
});

動畫和效果

jQuery 提供函式讓做動畫變得更簡單。
例如 .fadeIn()、.slideUp()。

// 淡入元素
$("#myElement").fadeIn();

// 切換元素可見狀態
$("#myElement").toggle();

範例函數

jQuery 提供了許多內建函數,不用自己手刻。
例如 $.each()。

// 遍歷陣列
var myArray = [1, 2, 3, 4, 5];
$.each(myArray, function(index, value) {
    console.log(index + ": " + value);
});

外掛生態系統

jQuery 有許多外掛及社群,可以用別人寫好的,省去不少麻煩。

跨瀏覽器相容性

jQuery 在每個瀏覽器保持一致,不會因為跨瀏覽器產生問題。

以上就是常見的jQuery常見功能
不過要記得在HTML 中引入 jQuery 函式庫才能正確執行這些範例。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

這代表從 jQuery 官方網站上載入最新版本的 jQuery

今天就介紹到這邊~ 我們明天見~


上一篇
有因必有果--html裡的事件屬性
下一篇
網頁的工具箱--jQuery的小小實作
系列文
蛤架一個網站好貴喔,那我自己來10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言